<script setup>
import {createApp, defineAsyncComponent, nextTick, onUnmounted, reactive, ref, watch} from "vue";
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import AddUserPopover from '@/components/addUserPopover/index.vue'
import Markdown from '@/components/markdown/index.vue'
import TaskDetails from '@/views/task/details.vue'
import draggable from 'vuedraggable'
import api from "@/api";
import {ElMessage, ElMessageBox, ElNotification} from "element-plus";
import tool from "@/utils/tool";
import config from "@/config"
import {useRoute, useRouter} from "vue-router";
import AddTaskDialog from "@/components/addTaskDialog/index.vue";
import {CircleCheck, Clock} from "@element-plus/icons-vue";
import taskHook from "@/hooks/taskHook";
import UserTaskList from "@/views/task/userTaskList";

const scEditor = defineAsyncComponent(() => import('@/components/scEditor/index.vue'));

const app = createApp({})
app.component({
	AddUserPopover,
	Markdown,
	TaskDetails,
	AddTaskDialog,
	draggable,
	UserTaskList
})

const {
	optionsStatue,
	taskStatusList,
	selectPriorityList
} = taskHook()

const yearOptions = ref([
	{
		label: '2024',
		value: '2024'
	},
	{
		label: '2025',
		value: '2025'
	}
])

const list = ref([])

const projectList = ref([])
const nowProject = ref({projectName: '', id: ''})

const route = useRoute()
const router = useRouter()
/**
 * 查询项目列表
 */
const getProjectList = () => {
	// if(route.query.id) {
	//
	// }else {
	api.project.getProjectAll.get().then(res => {

		projectList.value = res.data
		if (route.query.id) {
			nowProject.value = projectList.value.filter(i => {
				if (i.id === route.query.id) {
					return i
				}
			})[0]
		} else {
			nowProject.value = projectList.value[0]
		}
		if (!nowProject.value) {
			nowProject.value = {id: '0'}
		}

		getTaskList()
	})
	// }

}

getProjectList()

const searchForm = ref({
	taskTitle: '',
	taskStatue: '',
	responsibleId: []
})

searchForm.value.year = ['2025']

/* 实时搜索任务描述*/
watch(() => searchForm.value.taskTitle, () => {
	getTaskList()
})

const projectStatue = ref("")

const ifTaskStatue = ref(true)

/**
 * 查询任务列表
 */
const getTaskList = () => {
	// ifTaskStatue.value = searchForm.value.taskStatue !== ''
	api.task.list.post({
		projectId: nowProject.value.id,
		type: route.name === 'keynote' ? '1' : '2',
		// statue: activeName.value,
		...searchForm.value
	}).then(res => {
		list.value = res.data
		nextTick(() => {
			const listMainDom = document.getElementsByClassName('custom-scroll')[0]
			listMainDom.addEventListener('mousedown', startDrag)
			listMainDom.addEventListener('mouseup', stopDrag)
		})
		// list.value.push({addTask: 1})
		// forceUpdate()
	})
}
// 导出周报
const downloadWeek = () => {
	// window.open(`${config.API_URL}/task/downloadWeek`)
	window.location.href = `${config.API_URL}/task/downloadWeek`
}
const projectTaskList = ref([])
//获取全部项目任务
const getProjectTask = () => {
	api.task.projectTasklist.get({statue: projectStatue.value}).then(res => {
		projectTaskList.value = res.data
	})
}

const selectStatueList = reactive([{
	value: 0,
	label: '进行中'
}, {
	value: 1,
	label: '挂起'
}, {
	value: 2,
	label: '完成'
}])

const drawer = ref(false)
const drawerId = ref('')
/**
 * 点击单个任务
 * @param row 任务数据
 */
const taskOnClick = (row) => {
	drawerId.value = row.id
	drawer.value = true
}

const closeTaskDetails = (status) => {
	drawer.value = status
	drawerId.value = ''
	getTaskList()
}


/**
 * 拖拽结束的事件
 */
const onEnd = (a) => {
	list.value.map((item, index) => {
		item.taskResponsibleSort = index
	})
	api.task.taskSort.post(list.value).then(() => {
		getTaskList()
	})
}

/**
 * 子元素拖拽结束的事件
 */
const onChildEnd = (a, taskList) => {
	taskList.map((item, index) => {
		item.sort = index
	})
	api.task.taskSort.post(list.value).then(() => {
		getTaskList()
	})
}

const start1 = moment(new Date()).format("YYYY-MM-DD");

const empAddFlag = ref(false)
const form = ref({
	projectId: '',
	taskTitle: '',
	taskType: '1',
	taskResponsible: '',//负责人id
	userList: [], //参与人列表
	responsibleList: [], //负责人列表
	startTime: start1,
	endTime: null,
	priority: '',
	label: '',
	taskDescription: '',
	status: '',
	priorityVe: false,
	feedtype: '0',
	feedcycle: '',
	empAddFlag: false
})
const statueForm = ref({})

const nowRules = reactive({
	taskTitle: [
		{
			required: true,
			trigger: 'blur'
		}
	],
	endTime: [
		{
			type: 'date',
			required: true,
			message: '请输入日期',
			trigger: 'change'
		},
	],
})

const rules = reactive({
	taskTitle: [
		{required: true, trigger: 'blur'}
	],
	taskType: [
		{
			required: false,
			trigger: 'change'
		},
	],
	priority: [
		{
			required: true,
			trigger: 'change'
		},
	],
	label: [
		{
			required: false,
			trigger: 'change'
		},
	],
	responsibleList: [
		{
			required: true,
			trigger: 'change'
		}
	],
	taskDescription: [
		{
			required: false,
			trigger: 'change'
		},
	],
	status: [
		{
			required: false,
			trigger: 'change'
		},
	],
	priorityVe: [
		{
			required: false,
			trigger: 'change'
		},
	],
	endTime: [
		{
			type: 'date',
			required: true,
			trigger: 'change'
		},
	],
})

const dialogAddForm = ref(false)

const addFormFef = ref(null)
const showAddFormDialog = () => {
	dialogAddForm.value = true
	empAddFlag.value = false
	nextTick(() => {
		form.value = {
			projectId: '',
			taskTitle: '',
			taskType: '1',
			taskResponsible: '',//负责人id
			userList: [], //参与人列表
			responsibleList: [], //负责人列表
			startTime: start1,
			endTime: null,
			priority: '',
			label: '',
			taskDescription: '',
			status: '',
			priorityVe: false,
			feedtype: '0',
			feedcycle: ''
		}
	})
}
const showEmpAddFormDialog = () => {
	dialogAddForm.value = true
	empAddFlag.value = true
	// nextTick(() => {
	// 	console.log(tool.data.get('USER_INFO'))
	form.value = {
		projectId: '',
		taskTitle: '',
		taskType: '1',
		// taskResponsible: tool.data.get('USER_INFO').id,//负责人id
		taskResponsible: tool.data.get('USER_INFO').id,//负责人id
		userList: [], //参与人列表
		// responsibleList: [tool.data.get('USER_INFO')], //负责人列表
		responsibleList: [tool.data.get('USER_INFO')], //负责人列表
		startTime: start1,
		endTime: null,
		priority: '',
		label: '',
		taskDescription: '',
		status: '',
		priorityVe: false,
		feedtype: '0',
		feedcycle: '',
		empAddFlag: empAddFlag.value
	}
	if(isLeader.value==1){
		form.value.taskResponsible=[]
		console.log("职位"+form.value.taskResponsible)
	}

	// })
	console.log(form.value.taskResponsible)
	// })
	console.log(form.value)
}


/**
 * 已选择参与人集合
 * @param userList
 * @return data
 */
const getSelectUser = (userList) => {
	form.value.userList = userList
}

/**
 * 删除已选用户
 * @param user
 */
const delSelectUser = (user, formName) => {
	let index = form.value[formName].indexOf(user)
	form.value[formName].splice(index, 1)
}

/**
 * 已选择负责人集合
 * @param userList
 * @return data
 */
const getSelectResponsible = (userList) => {
	form.value.taskResponsible = userList[0].id
	form.value.responsibleList = userList
}

const setUrgentProcessing = (row) => {
	ElMessageBox.confirm(
		'您确认要申请验收该任务吗？',
		{
			confirmButtonText: '申请验收',
			cancelButtonText: '取消',
			type: 'warning',
			beforeClose
		}
	)

	async function beforeClose(action, instance, done) {
		if (action === 'confirm') {
			instance.confirmButtonLoading = true
			instance.confirmButtonText = '申请验收中...'
			row.taskDescription = '1'
			const req = await api.task.waitingTask.get({taskId: row.id})
			if (req.code === 200) {
				done()
				instance.confirmButtonLoading = false
				getTaskList()
			}

		} else {
			done()
		}
	}
}

/**
 * 催办
 */
const urgentProcessing = (id) => {
	ElMessageBox.confirm(
		'您确认要催办该任务吗？',
		{
			confirmButtonText: '催办',
			cancelButtonText: '取消',
			type: 'warning',
			beforeClose
		}
	)

	async function beforeClose(action, instance, done) {
		if (action === 'confirm') {
			instance.confirmButtonLoading = true
			instance.confirmButtonText = '催办中...'
			const req = await api.task.urgeTask.get({taskId: id})
			if (req.code === 200) {
				done()
				ElMessage.success('催办成功')
				instance.confirmButtonLoading = false
				getTaskList()
			}

		} else {
			done()
		}
	}
}
/**
 * 显示删除弹框
 */
const showRemove = (id) => {
	ElMessageBox.confirm(
		'您确认要删除该任务吗？此操作不可撤销。',
		{
			confirmButtonText: '删除',
			cancelButtonText: '取消',
			type: 'warning',
			beforeClose
		}
	)

	async function beforeClose(action, instance, done) {
		if (action === 'confirm') {
			instance.confirmButtonLoading = true
			instance.confirmButtonText = '删除中...'
			const req = await api.task.delete.get({taskId: id})
			if (req.code === 200) {
				done()
				instance.confirmButtonLoading = false
				getTaskList()
			}

		} else {
			done()
		}
	}
}

/* 是否为领导 */
const isLeader = ref()
isLeader.value = parseInt(tool.data.get("USER_INFO").isLeader);
const loginUserId = ref('')
loginUserId.value = String(tool.data.get("USER_INFO").id);
const roleType = ref('')
roleType.value = String(tool.data.get("USER_INFO").roleType);

const noneCommentInput = ref()
noneCommentInput.value = route.path === '/details' ? isLeader.value : true
/**
 * 领导审批
 */
const examine = (id) => {
	ElMessageBox.confirm(
		'您确认要审批改任务吗？此操作不可撤销。',
		{
			confirmButtonText: '审批',
			cancelButtonText: '取消',
			type: 'warning',
			beforeClose
		}
	)

	async function beforeClose(action, instance, done) {
		if (action === 'confirm') {
			instance.confirmButtonLoading = true
			instance.confirmButtonText = '审批中...'
			const req = await api.task.examTask.get({taskId: id})
			if (req.code === 200) {
				done()
				instance.confirmButtonLoading = false
				getTaskList()
			}

		} else {
			done()
		}
	}
}
/**
 * 申请工单
 * @type {Ref<UnwrapRef<string>>}
 */
const dialogStatue = ref(false)
const applyOrder = (element) => {
	dialogStatue.value = true
	statueForm.value = element
}

const statueSubmit = () => {
	statueForm.value.parentTaskId = '656565656+8989dasfas'
	api.taskApply.add.post(statueForm.value).then(res => {
		dialogStatue.value = false
	})
}

const activeName = ref('0')

/**
 * 切换任务
 * @param tab
 */
const tabChange = (tab) => {
	activeName.value = tab.props.name
	getTaskList()
}

const selectProject = (item) => {
	if (item.id === 0) {
		getProjectTask()
	}
	if (nowProject.value.id !== item.id) {
		nowProject.value = item
		getTaskList()
	}

}

const statusNow = ref({})
/**
 * 修改任务状态
 * @param item
 * @param status
 * @param isLeaderAndSuccess 只有领导才能点击已完成
 */
const setTaskStatus = (item, status, isLeaderAndSuccess) => {
	// if(isLeaderAndSuccess){
	// 	return
	// }
	// item.status = status
	statusNow.value = JSON.parse(JSON.stringify(item))
	statusNow.value.status = status
	api.task.edit.post(statusNow.value).then(res => {
		getTaskList()
	})
}
const setTaskStatusAll = (item, status) => {

	// item.status = status
	statusNow.value = JSON.parse(JSON.stringify(item))
	statusNow.value.status = status
	api.task.edit.post(statusNow.value).then(res => {
		getProjectTask()
	})
}
const showAddTaskCard = ref(false)
/**
 * 添加任务
 * @param data 任务列表
 */
const addTaskClick = (data) => {
	dialogAddForm.value = true
	form.value = {
		projectId: '',
		taskTitle: '',
		taskType: '1',
		taskResponsible: data.taskResponsibleId,//负责人id
		userList: [], //参与人列表
		responsibleList: [data.taskResponsibleName], //负责人列表
		startTime: start1,
		endTime: null,
		priority: '',
		label: '',
		taskDescription: '',
		status: '',
		priorityVe: false,
		feedtype: '0',
		feedcycle: ''
	}
}

const addTaskSubmit = () => {
	if (!form.value.taskTitle) {
		ElNotification({
			title: '警告',
			message: '请输入标题',
			type: 'warning',
		})
		return
	}
	form.value.projectId = nowProject.value.id
	api.task.add.post(form.value).then(ref => {
		showAddTaskCard.value = false
		getTaskList()
	})
}

document.body.addEventListener("click", (event) => {
		// )
	}
)

const addTaskUserList = ref({
	projectId: '',
	responsibleList: [], //负责人列表
})
/**
 * 新建负责人
 * @param userList
 */
const addTaskUser = (userList) => {

	addTaskUserList.value.projectId = nowProject.value.id
	addTaskUserList.value.responsibleList = userList
	api.task.createTaskResponsible.post(addTaskUserList.value).then(ref => {
		showAddTaskCard.value = false
		getTaskList()
	})
}

const options = {
	filter: ".ignore-elements",  // 不导致拖拽的选择器(字符串或函数)
}
// 卡片限制拖拽
const draggableCardMove = (event) => {
	if (event.to.className.indexOf('not-draggable') !== -1) {
		return false
	}
}
// 任务限制拖拽
const draggableListMove = (event) => {
	if (event.related.innerText.indexOf('新建') !== -1 || event.dragged.innerText.indexOf('新建') !== -1) {
		return false
	}
}


const pickerOptions0 = (time) => {
	if (time.getTime() < Date.now() - 8.64e7) {
		return true;
	} else {
		return false;
	}
}
var userInfo = tool.data.get("USER_INFO");
var isChangshang = userInfo.role.includes('manufacturer')
/*是否是员工*/
var isStaff = userInfo.role.includes('employee')

/* 获取表格优先级 */
const setTablePriority = (priority) => {
	return selectPriorityList.filter(i => i.value === priority)[0].label
}

const checkAccept = (element) => {
	setTaskStatus(element, 1)
	// return selectPriorityList.filter( i => i.value === priority)[0].label
}

/* 是否显示验收按钮 */
const showCheckAccept = (data) => {
	return isLeader.value && (data.status !== 1 && data.taskDescription === '1')
}

/* 设置卡片class */
const setCardClass = (data) => {
	let className = data.status === 1 ? 'task-success' : ''
	// 未读
	className += data.point ? 'is-unread' : ''
	return className
}

/* 要求反馈周期切换类型 */
const feedtypeChange = () => {
	if (form.value.feedtype === '1') {
		if (form.value.feedcycle === '30' || !form.value.feedcycle) {
			form.value.feedcycle = '1'
		}
	} else {
		form.value.feedback = ''
	}
}

const feedcycleChange = () => {
	form.value.feedback = ''
}

const closeDialog = () => {
	dialogAddForm.value = false
	getTaskList()
}


//截止时间状态：过期0 今天1 明天2
const endTimeStatusList = ['danger', 'warning', 'info']

/* 设置任务状态btn颜色 */
const setTaskStatusBtnType = (element) => {
	// if (new Date(element.endTime).getTime() < new Date(moment().format('YYYY-MM-DD')).getTime() && element.status === 0) {
	// 	return endTimeStatusList[0]
	// }
	console.log(element)
	return taskStatusList[element.status].type
}

/* select 显示是否为当前用户 */
const showIsMeTitle = (id) => {
	return id === JSON.parse(localStorage.getItem('USER_INFO')).content.id
}

const optionTaskResponsible = ref([])

/* 获取负责人下拉选 */
function getOptionTaskResponsible() {
	const type = route.name === 'keynote'? '1' : '2'
	api.task.getResponsibleListMobile.get({type}).then(res => {
		optionTaskResponsible.value = res.data
	})
}

getOptionTaskResponsible()
const isDragging = ref(false)

const startPageX = ref(0)

/* 鼠标按住开始 */
const startDrag = (event) => {
	startPageX.value = event.pageX
	isDragging.value = true;
	document.addEventListener('mousemove', handleDrag);
	document.addEventListener('mouseup', stopDrag);
};

/* 鼠标移动 */
const handleDrag = (event) => {
	if (isDragging.value) {
		const listMainDom = document.getElementsByClassName('custom-scroll')[0]
		// 计算移动的数值 当前滚动条位置 +（当前鼠标坐标-开始坐标）/ 速度（速度数值越小移动越快）
		listMainDom.scrollLeft += (startPageX.value - event.pageX) / 10
	}
};

/* 鼠标弹起结束 */
const stopDrag = () => {
	isDragging.value = false;
	document.removeEventListener('mousemove', handleDrag);
	document.removeEventListener('mouseup', stopDrag);
};


onUnmounted(() => {
	document.removeEventListener('mouseup', stopDrag);
});

const resetForm = () => {
	searchForm.value = {
		taskTitle: '',
		taskStatue: '',
		prop: '',
		order: '',
		responsibleIdList: []
	}
	getTaskList()
}

const taskSwitch = ref(true)
// 看板、列表切换
const taskSwitchChange = () => {
	console.log(taskSwitch.value)
}
console.log('666666')
console.log(route.name)
</script>

<template>
	<router-view></router-view>
	<el-main v-if="taskSwitch" id="demo-main">
		<div class="demo-header">
			<!--			<div>-->
			<!--				<el-icon color="#409eff" size="23">-->
			<!--					<Grid/>-->
			<!--				</el-icon>-->
			<!--				<el-icon color="#b5b5b5" size="20">-->
			<!--					<ArrowRight/>-->
			<!--				</el-icon>-->
			<!--				<div class="project-title">-->
			<!--					<el-popover :width="260" placement="bottom" trigger="click">-->
			<!--						<template #reference>-->
			<!--							<el-button>-->
			<!--								{{ nowProject.projectName }}-->
			<!--								<el-icon color="#b5b5b5" size="20">-->
			<!--									<Operation/>-->
			<!--								</el-icon>-->
			<!--							</el-button>-->
			<!--						</template>-->
			<!--						<div class="select-taskList">-->
			<!--							&lt;!&ndash;							项目列表&ndash;&gt;-->
			<!--							<div v-for="i in projectList" :key="i.id">-->
			<!--								<el-button-->
			<!--									class="set-font-size"-->
			<!--									:bg="i.id === nowProject.id"-->
			<!--									:type="i.id === nowProject.id ?'primary':''"-->
			<!--									text-->
			<!--									@click="selectProject(i)"-->
			<!--								>{{ i.projectName }}-->
			<!--								</el-button>-->
			<!--							</div>-->
			<!--							<el-divider v-if="!isChangshang"/>-->
			<!--							<div v-if="!isChangshang">-->
			<!--								<el-button-->
			<!--									class="set-font-size"-->
			<!--									text-->
			<!--									@click="selectProject({id:0,projectName:'全部项目'})"-->
			<!--								>全部项目-->
			<!--								</el-button>-->
			<!--							</div>-->
			<!--						</div>-->
			<!--					</el-popover>-->

			<!--				</div>-->
			<!--				<el-divider direction="vertical"/>-->
			<!--				<el-tabs v-model="activeName" class="demo-tabs" @tab-click="tabChange">-->
			<!--					<el-tab-pane v-for="tab in tabList" :key="tab.name" :label="tab.label" :name="tab.name"/>-->
			<!--				</el-tabs>-->
			<!--				<div v-if="!isChangshang">-->
			<!--					<el-button class="add-upload" type="primary" @click="downloadWeek()">导出</el-button>-->
			<!--				</div>-->
			<!--			</div>-->
			<div v-if="nowProject.id!==0">
				<el-form :inline="true" :model="searchForm" class="search-form">
					<el-form-item style="width: 200px">
						<el-input
							v-model="searchForm.taskTitle"
							:prefix-icon="Search"
							class="w-50 m-2"
							clearable
							placeholder="搜索任务描述"
							size="large"
						/>
					</el-form-item>
					<el-divider direction="vertical"/>
					<el-form-item v-if="!isChangshang" label="负责人：" style="width: 12vw">
						<el-select v-model="searchForm.responsibleId"
								   clearable
								   filterable
								   multiple
								   placeholder="选择负责人"
								   @change="getTaskList"
						>
							<el-option
								v-for="item in optionTaskResponsible"
								:key="item.id"
								:label="item.cn"
								:value="item.id"
							>
								<div :style="`grid-template-columns: repeat(${item.jslText? '3':'2'},1fr);`"
									 class="checkbox-left">
									<span style="font-weight: bold">{{ item.cn }}</span>
									<span v-if=" item.jslText">{{ item.jslText }}</span>
									<span>{{ item.taskCount }}</span>
								</div>

								<!--									<span style="float: left">{{ item.cn }}</span>-->
								<!--								<span v-if="showIsMeTitle(item.id)"-->
								<!--									  style="float: right; color: #8492a6; font-size: 13px">我</span>-->


							</el-option>
						</el-select>
					</el-form-item>
					<el-divider direction="vertical"/>
					<el-form-item label="优先级：" style="width: 155px">
						<el-select
							v-model="searchForm.priority"
							clearable
							filterable
							placeholder="优先级"
							@change="getTaskList"

						>
							<el-option
								v-for="item in selectPriorityList"
								:key="item.value"
								:label="item.label"
								:value="item.value"
							/>
						</el-select>
					</el-form-item>
					<el-divider direction="vertical"/>
					<el-form-item label="任务状态：" style="width: 185px">
						<el-select v-model="searchForm.taskStatue"
								   clearable
								   filterable
								   placeholder="任务状态"
								   @change="getTaskList"
						>
							<el-option
								v-for="item in optionsStatue"
								:key="item.value"
								:label="item.label"
								:value="item.value"
							/>
						</el-select>
					</el-form-item>
					<el-divider direction="vertical"/>
<!--					<el-form-item label="要求完成时间：">-->
<!--						<el-date-picker-->
<!--							v-model="searchForm.endTime"-->
<!--							placeholder="时间"-->
<!--							style="width: 140px"-->
<!--							type="date"-->
<!--							value-format="YYYY-MM-DD"-->
<!--							@change="getTaskList"-->
<!--						/>-->
<!--					</el-form-item>-->
					<el-form-item label="年份：" style="width: 280px;">
						<el-select v-model="searchForm.year"
								   clearable
								   multiple
								   filterable
								   placeholder="年份"
								   @change="getTaskList"
						>
							<el-option
								v-for="item in yearOptions"
								:key="item.value"
								:label="item.label"
								:value="item.value"
							/>
						</el-select>
					</el-form-item>
					<el-divider direction="vertical"/>
					<el-form-item style="width: 63px">
						<el-button
							class="set-font-size"
							@click="resetForm()"
						>
							重置
						</el-button>
					</el-form-item>
					<el-divider direction="vertical"/>
					<el-switch
						v-model="taskSwitch"
						:change="taskSwitchChange()"
						active-text="看板"
						class="ml-2"
						inactive-text="列表"
						inline-prompt
						size="large"
						style="--el-switch-on-color: #409EFF; --el-switch-off-color: #409EFF"
					/>
					<!--					<el-form-item>-->
					<!--						<el-button :icon="Sort">排序</el-button>-->
					<!--					</el-form-item>-->
					<!--					v-if="nowProject.id!==0 && !isChangshang &&-->
					<el-button
						v-if="nowProject.id!==0 && isLeader && route.name === 'keynote'"
						:icon="Plus"
						class="add-btn set-font-size"
						type="primary"
						@click="showAddFormDialog"
					>
						新建
					</el-button>
					<el-button
						v-if="nowProject.id!==0 && route.name === 'regular'"
						:icon="Plus"
						class="add-btn set-font-size"
						type="primary"
						@click="showEmpAddFormDialog"
					>
						新建
					</el-button>

				</el-form>
			</div>
			<!--	全部项目页面		-->
			<div v-else>
				<el-form :inline="true" :model="searchForm" class="search-form">
					<!--					<el-form-item>-->
					<!--						<el-input-->
					<!--							v-model="searchForm.title"-->
					<!--							:prefix-icon="Search"-->
					<!--							class="w-50 m-2"-->
					<!--							placeholder="搜索任务标题（按Enter搜索）"-->
					<!--							size="large"-->
					<!--							@keyup.enter.native="getTaskList"-->
					<!--						/>-->
					<!--					</el-form-item>-->
					<!--					<el-divider direction="vertical"/>-->
					<!--					<el-form-item>-->
					<!--						<el-button :icon="Sort">排序</el-button>-->
					<!--					</el-form-item>-->
					<el-form-item label="任务状态：" style="width: 280px">
						<el-select v-model="projectStatue"
								   clearable
								   placeholder="选择任务状态"
								   @change="getProjectTask"
						>
							<el-option
								v-for="item in optionsStatue"
								:key="item.value"
								:label="item.label"
								:value="item.value"
							/>
						</el-select>
					</el-form-item>
					<el-divider direction="vertical"/>
					<el-button v-if="isLeader" :icon="Plus" class="add-btn set-font-size" type="primary"
							   @click="showAddFormDialog">新建
					</el-button>
				</el-form>
			</div>
		</div>
		<el-empty v-if="list.length === 0" class="list-main " description="暂无相关任务"
				  style=" flex-direction: column;"/>

		<draggable v-else-if="nowProject.id !==0"
				   v-model="list"
				   :disabled="ifTaskStatue"
				   :move="draggableListMove"
				   animation="200"
				   class="list-main custom-scroll"
				   group="people"
				   @end="onEnd">
			<template #item="{ element }">
				<div>
					<div class="task-main-header">
						<div v-if="element.addTask" class="card-addTask-title">
							<!--							<el-button-->
							<!--								link-->
							<!--								:icon="Plus"-->
							<!--							>新建分组</el-button>-->
							<!--							<AddUserPopover :select="form.userList" @submit="addTaskUser"/>-->
							<!--							<div class="card-addTask-name">新建负责人</div>-->
						</div>
						<div v-else>
							<div v-if="nowProject.id" class="card-addTask-title-container">
								<div class="card-addTask-title-container-left">{{ element.taskResponsibleName.cn }}
									<div v-if="route.name === 'keynote'" class="card-addTask-title-container-right">
										{{ element.onTimeRate }}
									</div>
								</div>

								<div class="card-addTask-title-container-right">已完成{{ element.taskFinished }}个
									&nbsp; 总任务{{ element.taskListSize }}个
								</div>
								<!--								<div>接收 {{ element.receptionSize }} 个，已完成 {{ element.finishSiz }} 个，进行中-->
								<!--									{{ element.wFinishSiz }} 个-->
								<!--								</div>-->
								<div>
									<!--									{{ element.wFinishSiz }}/{{ element.receptionSize }}-->
								</div>
								<!--								<el-progress-->
								<!--									:percentage="element.process"-->
								<!--									:status="element.process===100?'success':''"-->
								<!--									color="#67C23A"/>-->
							</div>
						</div>
					</div>
					<el-scrollbar height="100%">
						<div class="task-main-body ignore-elements">
							<draggable
								v-model="element.taskList"
								:class="!element.taskList?'not-draggable':''"
								:disabled="true"
								:move="draggableCardMove"
								animation="200"
								class="draggable"
								group="childpeople"
								@end="(event)=>onChildEnd(event, element.taskList)">
								<template #item="{ element }">
									<el-card
										shadow="hover"
										@click="taskOnClick(element)">
										<div :class="setCardClass(element)"
											 class="card-content-body card-content-body-title ">
											<!--										待审批水印 	-->
											<img
												v-if="element.status !== 1 && element.taskDescription === '1' "
												alt=""
												class="urgentProcessing-img"
												src="@/assets/urgentProcessing.png"
											>
											<div>
												<!--												<img v-if="element.priority==='3'" style="width: 18px;margin-right: 5px;" src="@/assets/priority_3.png">-->
												<!--												<img v-if="element.priority==='2'" style="width: 18px;margin-right: 5px;" src="@/assets/priority_2.png">-->
												<!--												<img v-if="element.priority==='1'" style="width: 18px;margin-right: 5px;" src="@/assets/priority_1.png">-->
												【{{ setTablePriority(element.priority) }}】
												{{ element.taskTitle }}
											</div>
											<!--											更多按钮-->
											<el-popover :width="230" placement="right" trigger="click">
												<template #reference>
													<el-button
														icon="MoreFilled"
														size="small"
														text
														@click.stop=""
													/>
												</template>
												<div>
													<!--													<div v-if="isExamine === '1'">-->
													<!--														<el-button-->
													<!--															class="del-task-btn"-->
													<!--															icon="Coordinate"-->
													<!--															text-->
													<!--															@click="applyOrder(element)"-->
													<!--														>-->
													<!--															申请工单-->
													<!--														</el-button>-->
													<!--													</div>-->
													<div>
														<el-button
															v-if="showCheckAccept(element) "
															class="del-task-btn"
															icon="CircleCheck"
															text
															@click="checkAccept(element)"
														>
															验收
														</el-button>
													</div>
													<div>
														<el-button
															v-if="element.status !== 1 && isLeader && !showCheckAccept(element)"
															class="del-task-btn"
															icon="Bell"
															text
															@click="urgentProcessing(element.id)"
														>
															催办
														</el-button>
													</div>
													<div>
														<el-button
															v-if="!isLeader && element.status !== 1 && element.myTaskFlag && !(element.status !== 1 && element.taskDescription === '1') && route.name === 'keynote'"
															class="del-task-btn"
															icon="Finished"
															text
															@click="setUrgentProcessing(element)"
														>
															申请验收
														</el-button>
													</div>
													<div>
														<el-button
															v-if="!isLeader && roleType === '2' && element.status !== 1 && element.myTaskFlag && !(element.status !== 1 && element.taskDescription === '1') && route.name === 'regular'"
															class="del-task-btn"
															icon="Finished"
															text
															@click="checkAccept(element)"
														>
															完成
														</el-button>
													</div>
													<div>
														<el-button
															v-if="!isLeader && roleType === '3' && element.status !== 1 && element.myTaskFlag && !(element.status !== 1 && element.taskDescription === '1') && route.name === 'regular'"
															class="del-task-btn"
															icon="Finished"
															text
															@click="setUrgentProcessing(element)"
														>
															申请验收
														</el-button>
													</div>
													<div>
														<el-button
															v-if="element.status === 1  && (isLeader || (element.myTaskFlag && route.name === 'regular' && isStaff) )  "
															class="del-task-btn"
															icon="Delete"
															text
															type="danger"
															@click="showRemove(element.id)"
														>
															删除
														</el-button>
													</div>
												</div>
											</el-popover>

											<!--						<el-button :icon="MoreFilled" />-->
										</div>
										<!--										<div class="card-content-body-response-user">-->
										<!--&lt;!&ndash;											<span class="card-content-body-response">&ndash;&gt;-->
										<!--&lt;!&ndash;												<p style="display: contents;">负责人：</p>{{element.taskResponsibleName}}&ndash;&gt;-->
										<!--&lt;!&ndash;											</span>&ndash;&gt;-->
										<!--											<span class="card-content-body-response-user-item-project">-->
										<!--												<p>参与人：</p>-->
										<!--												<span v-for="(item,i) in element.userList">-->
										<!--													{{item.cn}}<span v-show="i!==element.userList.length-1">、</span>-->
										<!--												</span>-->
										<!--											</span>-->
										<!--										</div>-->
										<!--状态情况-->
										<div class="card-content-body">
											<el-button
												:class="element.status === 1? 'task-success-btn':''"
												:disabled="element.status === 1"
												:type="element.status === 1?'info':endTimeStatusList[element.endTimeStatus]"
												class="endTime-btn"
												plain
												round
												size="small"
											>任务创建时间：{{ moment(element.createTime).format('YYYY-MM-DD') }}
											</el-button>
										</div>
										<div v-if="element.endTime" class="card-content-body">
											<el-button
												:class="element.status === 1? 'task-success-btn':''"
												:disabled="element.status === 1"
												:type="element.status === 1?'info':endTimeStatusList[element.endTimeStatus]"
												class="endTime-btn"
												plain
												round
												size="small"
											>要求完成时间：{{ moment(element.endTime).format('YYYY-MM-DD') }}
											</el-button>
											<div class="card-content-response-body">
												<el-popover :width="200" disabled placement="right" trigger="click">
													<template #reference>
														<el-button
															:class="element.status === 1? 'task-success-btn':''"
															:disabled="element.status === 1"
															:icon="taskStatusList[element.status].icon"
															:type="setTaskStatusBtnType(element)"
															round
															size="small"
															@click.stop
														>
															{{ taskStatusList[element.status].name }}
														</el-button>
													</template>
													<div>
														<!--													状态列表-->
														<div v-for="(btn, btnIndex) in taskStatusList"
															 :key="btn.type"
															 :style="taskStatusList[element.status].type === btn.type?'background: aliceblue;':''"
															 class="taskStatus-popover"
															 @click="setTaskStatus(element, btnIndex,!isLeader && btn.status === 1)"
														>
															<el-button
																:disabled="!isLeader && btn.status === 1"
																:icon="btn.icon"
																:type="btn.type"
																round
																size="small"
															>{{ btn.name }}
															</el-button>
														</div>
													</div>
												</el-popover>
											</div>
										</div>
									</el-card>
								</template>
							</draggable>
						</div>
					</el-scrollbar>
					<div v-if="isLeader && route.name === 'keynote'">
						<el-button
							v-if="!element.addTask"
							:icon="Plus"
							class="set-font-size"
							link
							@click="addTaskClick(element)"
						>添加新任务
						</el-button>
						<div>
							<!--								新任务card-->

						</div>
					</div>
				</div>
			</template>
		</draggable>

		<!--	申请改变状态	-->
		<el-dialog v-model="dialogStatue" :close-on-click-modal="false" title="申请工单">
			<el-form :model="statueForm">
				<el-form-item label="任务状态" prop="statue">
					<el-select v-model="statueForm.applyStatue" placeholder="请选择状态">
						<el-option
							v-for="option in selectStatueList"
							:key="option.label"
							:label="option.label"
							:value="option.value">
							{{ option.label }}
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="申请理由">
					<el-input v-model="statueForm.applyStatueReason" style="width: 50%" type="textarea"/>
				</el-form-item>
			</el-form>
			<template #footer>
			  <span class="dialog-footer">
				<el-button text @click="dialogStatue = false">取消</el-button>
				<el-button type="primary" @click="statueSubmit">
				  确定
				</el-button>
			  </span>
			</template>
		</el-dialog>
		<!-- 新增 -->
		<AddTaskDialog
			:dialogAddForm="dialogAddForm"
			:emp-add-flag="empAddFlag"
			:project-id="nowProject.id"
			:responsible-list="form.responsibleList"
			:task-responsible="empAddFlag ? tool.data.get('USER_INFO').id : form.taskResponsible"
			@close="closeDialog"
		/>
		<!--	详情	-->
		<TaskDetails
			:id="drawerId"
			:flex-column="isChangshang"
			:none-child-info="isChangshang"
			:none-comment-input="isLeader"
			:show-drawer="drawer"
			@close="closeTaskDetails"
		/>
	</el-main>
	<UserTaskList v-else></UserTaskList>
</template>

<script>
import {CircleCheck, Clock, MoreFilled, Plus, Remove, Search, Sort} from "@element-plus/icons-vue";
import moment from "moment/moment";


export default {
	name: 'autocode',
	computed: {
		Sort() {
			return Sort
		},
		moment() {
			return moment
		},
		MoreFilled() {
			return MoreFilled
		},
		Remove() {
			return Remove
		},
		CircleCheck() {
			return CircleCheck
		},
		Clock() {
			return Clock
		},
		Search() {
			return Search
		},
		Plus() {
			return Plus
		}
	},
	data() {
		return {
			tabList: [{
				label: '全部任务',
				name: '0'
			}, {
				label: '我负责的任务',
				name: '1'
			}, {
				label: '我参与的任务',
				name: '2'
			}, {
				label: '我创建的任务',
				name: '3'
			}
			],

			formInline: {
				search: ''
			},


		}
	},
	created() {
	},
	methods: {
		/**
		 * 点击添加按钮
		 */

		click(url) {
			this.$router.push({
				path: url
			});
		},

	}
}
</script>

<style lang="scss" scoped>

.add-upload {
	position: absolute;
	width: 70px;
	height: 30px;
	top: 90px;
	right: 18px;
}

#demo-main {
	font-size: 17px;
	overflow: hidden;
	background: #fff;
	padding: 0;
	height: 100%;

	.demo-header {
		padding: 0 15px;
		border: 1px solid #e6e6e6;

		> div:first-child {
			//display: flex;
			align-items: center;
			border-bottom: 1px solid #e4e7ed;

			.el-tabs {
				margin-left: 15px;
			}
		}

		.project-title {
			.el-button {
				font-size: 16px;
				border: 0;

				.el-icon {
					margin-left: 10px;
				}
			}
		}

		.search-form {
			padding: 7px 0;

			.add-btn {
				float: right;
				margin-top: 4px;
			}
		}
	}

	.list-main {
		padding: 0 15px 15px;
		display: flex;
		flex-direction: row;
		overflow: hidden;
		overflow-x: auto;
		background: #f6f8f9;
		height: calc(100% - 50px - 5px);
		user-select: none;

		// 控制列表高度
		.el-scrollbar {
			padding: 12px 8px 4px;
			height: calc(100% - 54px - 32px);
		}

		> div {
			width: 320px;
			border-right: solid 1px #eee;
			flex: 0 0 auto;

			.task-main-header {
				border-bottom: 1px solid #eee;
				padding: 12px 25px;

				> div {
					&:first-child {
						margin-bottom: 6px;
					}
				}

				.card-addTask-title {
					height: 31px;
					line-height: 37px;
					display: flex;
					align-items: center;

					.card-addTask-name {
						margin-left: 10px;
						color: #999;
					}
				}

				.card-addTask-title-container {
					display: flex;
					justify-content: space-between;
					align-items: center;

					.card-addTask-title-container-left {
						width: 120px;
						font-weight: bold;
						flex: 1;
						line-height: 24px;

						> div {
							display: inline-block;
							margin-left: 7px;
							font-weight: normal;
							font-size: 12px;
						}
					}

					.card-addTask-title-container-right {
						font-size: 12px;
						line-height: 24px;
					}
				}
			}

			.task-main-body {
				height: 100%;

				.draggable {
					height: 100%;
				}

				.el-card {
					cursor: pointer;
					position: relative;

					.card-content-body {
						display: flex;
						justify-content: space-between;
						margin-bottom: 6px;
						line-height: 32px;

						.endTime-btn {
							border: 0;
						}

						&:last-child {
							margin-bottom: 0;
						}
					}

					.card-content-body-title {
						display: flex;

						> div {
							flex: 1;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 4;
							-webkit-box-orient: vertical;
							white-space: pre-line;
						}

						> .el-button {
							margin-top: 5px;
						}
					}
				}
			}
		}
	}
}

.card-content-body-response {
	font-size: 13px;
	margin-left: 11px;
	padding-right: 0px;
	margin-right: 5px;
	width: 120px;
	border-right: 1px solid #d1dbe5;
}

.card-content-response-body {
	display: flex;
	justify-content: space-between;
	//align-items: center;
}

.card-content-body-response-user {
	margin-bottom: 10px;
	font-size: 13px;
	display: flex;
	justify-content: flex-start;
}

.card-content-body-response-user-item {
	width: calc(100% - 108px);
	font-size: 13px;
	display: flex;
	flex-wrap: wrap;
}

.card-content-body-response-user-item-project {
	//width: calc(100% - 108px);
	width: 100%;
	font-size: 13px;
	display: flex;
	flex-wrap: wrap;
}

.select-user {
	display: flex;

	.select-user-list {
		display: flex;

		> div {
			margin-right: 10px;
		}

		.user-avatar {
			> div {
				position: relative;

				&:hover {

					.del-user {
						display: unset;
						position: absolute;
						right: 0px;
						bottom: 0px;
						background: rgba(16, 16, 16, 0.39);
						top: 0px;
					}
				}

				.del-user {
					display: none;
				}
			}
		}
	}
}

.del-task-btn {
	width: 100%;
	justify-content: flex-start;
}

.task-success {
	//text-decoration: line-through;
	color: #aaa !important;
}

.task-success-btn.el-button.is-disabled:hover {
	cursor: pointer;
}

.add-task-bottom {
	display: flex;
	justify-content: space-between;
}

.is-unread:after {
	content: "";
	display: inline-block;
	background: red;
	height: 7px;
	width: 7px;
	border-radius: 20px;
	position: absolute;
	right: 5px;
	top: 6px;
}

.feedType1-main {
	display: inline-block;
	width: calc(100% - 150px);
	margin-left: 10px;
}
</style>


<style scoped>
.select-taskList .el-button {
	width: 100%;
	justify-content: flex-start;
}

.select-taskList .el-divider {
	margin: 5px 0;
}

.search-form .el-form-item {
	margin-bottom: 0;
	margin-right: 0;
	width: 252px;
}

.demo-header >>> .el-tabs__header {
	margin: 0;
}

.search-form >>> .el-input__wrapper {
	box-shadow: none;
}

.search-form .el-input {
	margin-bottom: 0;
	margin-right: 0;
}


.el-card {
	margin-bottom: 15px;
}

.code-item {
	cursor: pointer;
}

.code-item .img {
	width: 100%;
	height: 150px;
	background: #09f;
	display: flex;
	align-items: center;
	justify-content: center;
}

.code-item .img i {
	font-size: 100px;
	color: #fff;
	background-image: -webkit-linear-gradient(top left, #fff, #09f 100px);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.code-item .title {
	padding: 15px;
}

.code-item .title h2 {
	font-size: 16px;
}

.code-item .title h4 {
	font-size: 12px;
	color: #999;
	font-weight: normal;
	margin-top: 5px;
}

.code-item .title p {
	margin-top: 15px;
}

.el-card {
	--el-card-border-color: var(--el-border-color-light);
	--el-card-border-radius: 3px;
	--el-card-padding: 10px;
	--el-card-bg-color: var(--el-fill-color-blank);
}

>>> .el-scrollbar__view {
	height: 100%;
}

.checkbox-left {
	display: grid;
	justify-items: center;
}

.checkbox-left > span {
	padding: 0 8px;
	font-weight: 400;
}

.custom-select-dropdown .el-select-dropdown__wrap {
	min-width: 150px !important; /* 设置最小宽度 */
}
</style>
<style>
.custom-scroll::-webkit-scrollbar {
	width: 12px !important;
	height: 12px !important;
}

.form-select-userList {
	width: 12vw;
}

.form-select-userList .el-select__tags {
	max-height: 60px;
	overflow: auto;
}
</style>
